<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magento.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magento.com for more information.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2006-2016 X.commerce, Inc. and affiliates (http://www.magento.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

/**
 * Product media data template
 *
 * @see Mage_Catalog_Block_Product_View_Media
 */
?>
<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
    $setting = Mage::helper('themeframework/settings');
    $viewmode = $setting->getProductDetail_Viewmode();
    if(Mage::helper('themeframework/settings')->getSnippets_Enable()){
        $_snippet = "itemprop='image'";
    }else{
        $_snippet = "";
    }
?>
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<?php
    $_pageLayout = substr((str_replace(array('page/','.phtml'),'',Mage::app()->getLayout()->getBlock('root')->getTemplate())),0,1);    
    switch($_pageLayout){
        case 3:            
            $_PrimaryColumnWidth = $setting->getProductDetail_PrimaryThreeColumnWidth(12); 
            $_columnsContent = 12;                   
            break;
        case 2:
            $_PrimaryColumnWidth = $setting->getProductDetail_PrimaryTwoColumnWidth(9);
            $_columnsContent = 18; 
            break;
        default:
            $_PrimaryColumnWidth = $setting->getProductDetail_PrimaryColumnWidth(9);
            $_columnsContent = 24;  
            break;
    }  
    switch(Mage::helper('themeframework/settings')->checkDevice()){
        case 'desktop':
            $_winWidth = 1180;
            $_tempW = ($_winWidth*$_columnsContent*$_PrimaryColumnWidth)/(24*24) - 20;
            break;
        case 'tablet':
            $_winWidth = 980;
            $_tempW = ($_winWidth*$_columnsContent*$_PrimaryColumnWidth)/(24*24) - 20;
            break;
        case 'mobile': 
            $_tempW = 320;
            break;
    }     
?>
<div class="media-left">
	<?php if ($viewmode == 'cloudzoom'): ?>
        <?php
			$_img = $this->helper('catalog/image')->init($_product, 'image');   
                  
			if($_img->getOriginalWidth() >= $_tempW){
			     switch($_pageLayout){
                    case 3:  
                        $w	=	$setting->getProductDetail_BaseThreeImageWidth($_tempW);                
                        break;
                    case 2:
                        $w	=	$setting->getProductDetail_BaseTwoImageWidth($_tempW); 
                        break;
                    default:
                        $w	=	$setting->getProductDetail_BaseImageWidth($_tempW);  
                        break;
                }
			}				
			else
				$w  =	$_img->getOriginalWidth();
			$ratio = $w / $_img->getOriginalWidth();
			$h = $ratio * $_img->getOriginalHeight();
		?>
        <div class="product-image">
            <div id="magnify" class="magnify">        
            	<!-- This is the magnifying glass which will contain the original/large version -->
            	<div id="magnify-large" class="large" style="background: url('<?php echo $_img; ?>') no-repeat; width:<?php echo min($setting->getProductDetail_CloudZoomWidth(175), $_img->getOriginalWidth()) ?>px; height: <?php echo min($setting->getProductDetail_CloudZoomHeight(175), $_img->getOriginalHeight())?>px;"></div>
            	
            	<!-- This is the small image -->
                <a href="<?php echo $_img ?>">        	   
                   <img id="magnify-small" width="<?php echo $w ?>" class="small em-product-main-img" <?php if(Mage::helper('themeframework/settings')->getSnippets_Enable()): ?>itemprop="image"<?php endif;?> src="<?php echo $_img; ?>" alt='' title="<?php echo $this->escapeHtml($this->getImageLabel());?>" />
                </a>
            	
            </div>
            <a id="zoom-btn" rel="lightbox[em_lightbox]" href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>" title="<?php echo $this->escapeHtml($this->getImageLabel());?>">Zoom</a>
        </div>
        
        <script type="text/javascript">
            (function($) {
                $(document).ready(function(){
                	var native_width = 0;
                	var native_height = 0;
                    var magnify = $("#magnify");
                    var magnify_small = $("#magnify-small");
                    var magnify_large = $('#magnify-large');
                
                	//Now the mousemove function
                	magnify.mousemove(function(e){
                		//When the user hovers on the image, the script will first calculate
                		//the native dimensions if they don't exist. Only after the native dimensions
                		//are available, the script will show the zoomed version.
                		if(!native_width && !native_height)
                		{
                			//This will create a new image object with the same image as that in .small
                			//We cannot directly get the dimensions from .small because of the 
                			//width specified to 200px in the html. To get the actual dimensions we have
                			//created this image object.
                			var image_object = new Image();
                			image_object.src = magnify_small.attr("src");
                			
                			//This code is wrapped in the .load function which is important.
                			//width and height of the object would return 0 if accessed before 
                			//the image gets loaded.
                			native_width = image_object.width;
                			native_height = image_object.height;
                		}
                		else
                		{
                			//x/y coordinates of the mouse
                			//This is the position of .magnify with respect to the document.
                			var magnify_offset = $(this).offset();
                			//We will deduct the positions of .magnify from the mouse positions with
                			//respect to the document to get the mouse positions with respect to the 
                			//container(.magnify)
                			var mx = e.pageX - magnify_offset.left;
                			var my = e.pageY - magnify_offset.top;
                			
                			//Finally the code to fade out the glass if the mouse is outside the container
                			if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
                			{
                				magnify_large.fadeIn(100);
                			}
                			else
                			{
                				magnify_large.fadeOut(100);
                			}
                			if(magnify_large.is(":visible"))
                			{
                				//The background position of .large will be changed according to the position
                				//of the mouse over the .small image. So we will get the ratio of the pixel
                				//under the mouse pointer with respect to the image and use that to position the 
                				//large image inside the magnifying glass
                				var rx = Math.round(mx/magnify_small.width()*native_width - magnify_large.width()/2)*-1;
                				var ry = Math.round(my/magnify_small.height()*native_height - magnify_large.height()/2)*-1;
                				var bgp = rx + "px " + ry + "px";
                				
                				//Time to move the magnifying glass with the mouse
                				var px = mx - magnify_large.width()/2;
                				var py = my - magnify_large.height()/2;
                				//Now the glass moves with the mouse
                				//The logic is to deduct half of the glass's width and height from the 
                				//mouse coordinates to place it with its center at the mouse coordinates
                				
                				//If you hover on the image now, you should see the magnifying glass in action
                				magnify_large.css({left: px, top: py, backgroundPosition: bgp});
                			}
                		}
                	});
                    magnify.mouseleave(function(e){
                        magnify_large.fadeOut(100);
                    });
                });
            })(jQuery);        
        </script>
	<?php elseif ($viewmode == 'lightbox'): ?>
	<p class="product-image">
		<a rel="lightbox[em_lightbox]"  href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>"  title="<?php echo $this->escapeHtml($this->getImageLabel())?>">
		<?php
            switch($_pageLayout){
                case 3:  
                    $w	=	$setting->getProductDetail_BaseThreeImageWidth(380); 
                    $h = $setting->getProductDetail_BaseThreeImageHeight() ? $setting->getProductDetail_BaseThreeImageHeight() : null;               
                    break;
                case 2:
                    $w	=	$setting->getProductDetail_BaseTwoImageWidth(380); 
                    $h = $setting->getProductDetail_BaseTwoImageHeight() ? $setting->getProductDetail_BaseTwoImageHeight() : null;
                    break;
                default:
                    $w	=	$setting->getProductDetail_BaseImageWidth(380);  
                    $h = $setting->getProductDetail_BaseImageHeight() ? $setting->getProductDetail_BaseImageHeight() : null;
                    break;
            }            		
            $_img = '<img class="em-product-main-img" '.$_snippet.'id="image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize($w, $h).'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
			echo $_helper->productAttribute($_product, $_img, 'image');
		?>
		</a>
	</p>
	<?php else: ?>
	<p class="product-image zoom-default product-image-zoom" style="width:<?php echo floor($_tempW)?>px; height:<?php echo floor($_tempW)?>px;">
	    <?php
            switch($_pageLayout){
                case 3:  
                    $w	=	$setting->getProductDetail_BaseThreeImageWidth(380); 
                    $h = $setting->getProductDetail_BaseThreeImageHeight() ? $setting->getProductDetail_BaseThreeImageHeight() : null;               
                    break;
                case 2:
                    $w	=	$setting->getProductDetail_BaseTwoImageWidth(380); 
                    $h = $setting->getProductDetail_BaseTwoImageHeight() ? $setting->getProductDetail_BaseTwoImageHeight() : null;
                    break;
                default:
                    $w	=	$setting->getProductDetail_BaseImageWidth(380);  
                    $h = $setting->getProductDetail_BaseImageHeight() ? $setting->getProductDetail_BaseImageHeight() : null;
                    break;
            }
			$_img = '<img class="em-product-main-img" '.$_snippet.' style="max-width:none;" id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
	        echo $_helper->productAttribute($_product, $_img, 'image');
	    ?>
	</p>
	<p class="zoom-notice" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
	<div class="zoom" style="width:<?php echo floor($_tempW)?>px;max-width:100%;">
    <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo Mage::helper('core')->quoteEscape($this->__('Zoom Out')) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Zoom Out')) ?>" class="btn-zoom-out" />
	    <div id="track">
	        <div id="handle"></div>
	    </div>
    <img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo Mage::helper('core')->quoteEscape($this->__('Zoom In')) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Zoom In')) ?>" class="btn-zoom-in" />
	</div>
	<script type="text/javascript">
	//<![CDATA[
	    Event.observe(window, 'load', function() {
	        product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
	    });
        
        (function($) {
            $(window).resize($.throttle(300,function(){
                if(!isPhone){
                    var imgZoom = $('#image');
                    var sWrapperZoom = $('.zoom-default');
                    var sTrack = $('.zoom');
                    var w = $('.product-img-box').width();
                    sWrapperZoom.width(w);
                    sWrapperZoom.height(w);
                    sTrack.width(w);
                }
            })); 
        })(jQuery);
	//]]>
	</script>
	<?php endif ?>
</div>	
<?php else: ?>
<div class="media-left">
    <?php
        switch($_pageLayout){
                case 3:  
                    $w	=	$setting->getProductDetail_BaseThreeImageWidth(380); 
                    $h = $setting->getProductDetail_BaseThreeImageHeight() ? $setting->getProductDetail_BaseThreeImageHeight() : null;               
                    break;
                case 2:
                    $w	=	$setting->getProductDetail_BaseTwoImageWidth(380); 
                    $h = $setting->getProductDetail_BaseTwoImageHeight() ? $setting->getProductDetail_BaseTwoImageHeight() : null;
                    break;
                default:
                    $w	=	$setting->getProductDetail_BaseImageWidth(380);  
                    $h = $setting->getProductDetail_BaseImageHeight() ? $setting->getProductDetail_BaseImageHeight() : null;
                    break;
            }
    ?>
    <p class="product-image default_image_magento">
        <?php
            $_img = '<img class="em-product-main-img" '.$_snippet.' src="'.$this->helper('catalog/image')->init($_product, 'image')->resize($w,$h).'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
            echo $_helper->productAttribute($_product, $_img, 'image');
        ?>
    </p>
</div>
<?php endif; ?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <ul class="<?php if($setting->getMoreview_EnableSlider()):?>em-moreviews-slider <?php if($setting->getMoreview_SliderPaginationNumbers()):?>owl-pagination-numbers<?php endif;?><?php else:?>em-moreviews-noslider<?php endif;?>">
    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li class="item" >
            <?php 
                $_img = $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile());
            ?>
			<?php if ($viewmode == 'cloudzoom'): ?>
                <?php
    				$_img_thumb = (string)$_img->resize(null);
                    if($_img->getOriginalWidth() >= $_tempW){
                        switch($_pageLayout){
                            case 3:   
                                $mv_w   =   $setting->getProductDetail_BaseThreeImageWidth($_tempW);            
                                break;
                            case 2:
                                $mv_w   =   $setting->getProductDetail_BaseTwoImageWidth($_tempW);
                                break;
                            default:
                                $mv_w   =   $setting->getProductDetail_BaseImageWidth($_tempW);  
                                break;
                        }
                    }    
                    else
                        $mv_w   =   $_img->getOriginalWidth();
                    $ratio = $mv_w / $_img->getOriginalWidth();
                    $mv_h = $ratio * $_img->getOriginalHeight();
    				$_img_thumb = (string)$_img->resize($setting->getMoreview_Width(130), $setting->getMoreview_Height(130));
                    $_img_small = (string)$this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($mv_w,$mv_h);
                    $_img_big = (string)$this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile());
                ?>
                <a data-magnify-zoom="<?php echo $_img_big ?>" class="magnify-zoom-gallery" href="javasript:void(0)">
    				<img src="<?php echo $_img_thumb ?>" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
                </a>
				<a class="no-display" href="<?php echo $_img_big ?>" rel="<?php if ($_product->getImage() != $_image->getFile()) echo 'lightbox[em_lightbox]' ?>">lightbox moreview</a>
				
			<?php elseif ($viewmode == 'lightbox'): ?>
    			<?php $_img_thumb = (string)$_img->resize($setting->getMoreview_Width(130), $setting->getMoreview_Height(130)); ?>
    			<a rel="lightbox[em_lightbox]"  href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()); ?>"  title="<?php echo $this->escapeHtml($_image->getLabel()) ?>">
    				<img src="<?php echo $_img_thumb; ?>" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
    			</a>			
            <?php else: ?>
    			<?php $_img_thumb = (string)$_img->resize($setting->getMoreview_Width(130), $setting->getMoreview_Height(130)); ?>
                <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>">
				<img src="<?php echo $_img_thumb; ?>" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" /></a>
            <?php endif ?>
        </li>
    <?php endforeach; ?>
    </ul>
</div>
<script type="text/javascript">
//<![CDATA[
    <?php if ($viewmode == 'cloudzoom'): ?>
        jQuery('.magnify-zoom-gallery').click(function (e) {
            e.preventDefault();
            var $_this = jQuery(this);
            var magnify_small = jQuery('#magnify-small');
            var magnify_large = jQuery('#magnify-large');
            var $_bgImg = 'url(' + $_this.data('magnify-zoom') + ')';
            var zoom_btn = jQuery('#zoom-btn');
        	magnify_small.attr('src', $_this.data('magnify-zoom'));            
            magnify_large.css({
                'background-image': $_bgImg
            });
            zoom_btn.attr('href', $_this.data('magnify-zoom'));
        });
    <?php endif;?>
    <?php if($setting->getMoreview_EnableSlider()):?>
    <?php 
        $_desktop = $setting->getMoreview_SliderItemsDesktop();
        $_desktopSmall =  $setting->getv_SliderItemsDesktopSmall();
        $_tablet = $setting->getMoreview_SliderItemsTablet();
        $_mobile = $setting->getMoreview_SliderItemsMobile();
        switch($_pageLayout){
            case 3:            
                $_maxItem = $setting->getMoreview_SliderItems()-2;                        
                if($_desktop>$_maxItem || $_desktop) {$_desktop=$_maxItem;}
                if($_desktopSmall>$_maxItem){$_desktopSmall=$_maxItem;}
                if($_tablet>$_maxItem){$_tablet=$_maxItem;} 
                if($_mobile>$_maxItem){$_mobile=$_maxItem;}                                    
                break;
            case 2:
                $_maxItem = $setting->getMoreview_SliderItems()-2;
                if($_desktop>$_maxItem) {$_desktop=$_maxItem;}
                if($_desktopSmall>$_maxItem){$_desktopSmall=$_maxItem;}
                if($_tablet>$_maxItem){$_tablet=$_maxItem;} 
                if($_mobile>$_maxItem){$_mobile=$_maxItem;} 
                break;
            default:
                $_maxItem = $setting->getMoreview_SliderItems(); 
                if($_desktop>$_maxItem) {$_desktop=$_maxItem;}
                if($_desktopSmall>$_maxItem){$_desktopSmall=$_maxItem;}
                if($_tablet>$_maxItem){$_tablet=$_maxItem;} 
                if($_mobile>$_maxItem){$_mobile=$_maxItem;}          
                break;
        }
    ?> 
    (function($) {
        $(document).ready(function() {
            var owl = $("ul.em-moreviews-slider"); 
                if(owl.length){
                    owl.owlCarousel({             
                        // Navigation
                        navigation : <?php echo $setting->getMoreview_SliderNavigation() ? 'true' : 'false'?>,
                        navigationText : ["<?php echo $this->__('Previous')?>", "<?php echo $this->__('Next')?>"],
                        pagination : <?php echo $setting->getMoreview_SliderPagination() ? 'true' : 'false'?>,
                        paginationNumbers: <?php echo $setting->getMoreview_SliderPaginationNumbers() ? 'true' : 'false'?>,                 
                        
                        <?php if(Mage::helper('themeframework/settings')->getGeneral_DisableResponsive(1)!=0):?>
                        // Responsive 
                        responsive: true,
                        items : <?php echo $_maxItem ? $_maxItem : 3 ?>, /*items above 1200px browser width*/
                        itemsDesktop : [1200,<?php echo $_desktop ? $_desktop : ($_maxItem ? $_maxItem : 3) ?>], /*//items between 1199px and 981px*/
                        itemsDesktopSmall : [992,<?php echo $_desktopSmall ? $_desktopSmall : ($_maxItem ? $_maxItem : 3) ?>],
                        itemsTablet: [768,<?php echo $_tablet ? $_tablet : ($_maxItem ? $_maxItem : 3) ?>],		                        
                        itemsMobile : [480,<?php echo $_mobile ? $_mobile : ($_maxItem ? $_maxItem : 3) ?>],
                        <?php else:?>
                        responsive: false,
                        items : <?php echo $_maxItem ? $_maxItem : 3 ?>, /*items above 1200px browser width*/
                        <?php endif;?>
                     
                        // CSS Styles
                        baseClass : "owl-carousel",
                        theme : "owl-theme", transitionStyle : false,
                        addClassActive : true,
                  });
              }
        });
    })(jQuery);
    <?php endif; ?>
//]]>
</script>
<?php endif; ?>
<?php echo $this->getChildHtml('after'); ?>
